<template>
  <div
    :id="id"
    :class="className"
    :style="{ height: height, width: width }"
  />
</template>

<script>
import echarts from "echarts";
import resize from "../mixins/resize";
import axios from 'axios'
export default {
	mixins: [resize],
	props: {
		className: {
			type: String,
			default: "chart"
		},
		id: {
			type: String,
			default: "chart"
		},
		width: {
			type: String,
			default: "200px"
		},
		height: {
			type: String,
			default: "200px"
		},
		mapData: {
			type: Object,
			default: {
				geoCoordMap: {},
				mapData: []
			}
		}
	},
	watch: {
		mapData(val) {
			console.log(val);
			this.opt.data = val.mapData
			this.geoCoordMap = val.geoCoordMap
			this.chartInit();
		}
	},
	data() {
		return {
			mapName: SYSTEM_INFO.INFO_MAP_CITY_NAME,
			mapLabel: SYSTEM_INFO.INFO_MAP_CITY_LABEL,
			chart: null,
			pos: {
				leftPlus: 115,
				leftCur: 150,
				left: 198,
				top: 50
			},
			opt: {
				mapName: SYSTEM_INFO.INFO_MAP_CITY_NAME, // 地图展示
				goDown: false, // 是否下钻
				bgColor: "#404a59", // 画布背景色
				activeArea: [], // 区域高亮,同echarts配置项
				data: []
				// 下钻回调(点击的地图名、实例对象option、实例对象)
				// callback: function(name, option, instance) {}
			},
			idx: 0,
			line: [
				[0, 0],
				[8, 11],
				[0, 22]
			],
			style: {
				font: '18px "pingfang", sans-serif',
				textColor: "#eee",
				lineColor: "rgba(147, 235, 248, .8)"
			},
			geoCoordMap: {},
			option: ""
		};
	},
	mounted() {
		this.chartInit()

	},
	beforeDestroy() {
		if (!this.chart) {
			return;
		}
		this.chart.dispose();
		this.chart = null;
	},
	methods: {
		/**
		 * i 实例对象
		 * o option
		 * n 地图名
		 **/
		resetOption(i, o, n) {
			var breadcrumb = this.createBreadcrumb(n);
			var j = name.indexOf(n);
			var l = o.graphic.length;
			if (j < 0) {
				o.graphic.push(breadcrumb);
				o.graphic[0].children[0].shape.x2 = 145;
				o.graphic[0].children[1].shape.x2 = 145;
				if (o.graphic.length > 2) {
					var cityData = [];
					var cityJson;
					for (var x = 0; x < this.opt.data.length; x++) {
						if (n === this.opt.data[x].city) {
							// $([this.opt.data[x]]).each(function(index,data){
							//     cityJson = {city:data.city,name:data.name,value:data.value,crew:data.crew,company:data.company,position:data.position,region:data.region};
							//     cityData.push(cityJson)
							// })
							this.opt.data[x].forEach(data => {
								cityJson = {
									name: data.name,
									value: data.value,
									company: data.company
								};
								cityData.push(cityJson);
							});
						}
					}

					if (cityData != null) {
						o.series[0].data = this.initSeriesData(cityData);
					} else {
						o.series[0].data = [];
					}
				}
				name.push(n);
				this.idx++;
			} else {
				o.graphic.splice(j + 2, l);
				if (o.graphic.length <= 2) {
					o.graphic[0].children[0].shape.x2 = 60;
					o.graphic[0].children[1].shape.x2 = 60;
					o.series[0].data = this.initSeriesData(this.opt.data);
				}
				name.splice(j + 1, l);
				this.idx = j;
				this.pos.leftCur -= this.pos.leftPlus * (l - j - 1);
			}

			o.geo.map = n;
			o.geo.zoom = 0.4;
			i.clear();
			i.setOption(o);
			this.zoomAnimation();
			this.opt.callback(n, o, i);
		},
		/**
		 * name 地图名
		 **/
		createBreadcrumb(name) {
			var cityToPinyin = {
				[this.mapLabel]: this.mapName
			};
			var breadcrumb = {
				type: "group",
				id: name,
				left: this.pos.leftCur + this.pos.leftPlus,
				top: this.pos.top + 3,
				children: [
					{
						type: "polyline",
						left: -90,
						top: -5,
						shape: {
							points: this.line
						},
						style: {
							stroke: "#fff",
							key: name
							// lineWidth: 2,
						},
						onclick: function() {
							var name = this.style.key;
							this.resetOption(this.chart, this.option, name);
						}
					},
					{
						type: "text",
						left: -68,
						top: "middle",
						style: {
							text: name,
							textAlign: "center",
							fill: this.style.textColor,
							font: this.style.font
						},
						onclick: function() {
							var name = this.style.text;
							this.resetOption(this.chart, this.option, name);
						}
					},
					{
						type: "text",
						left: -68,
						top: 10,
						style: {
							name: name,
							text: cityToPinyin[name]
								? cityToPinyin[name].toUpperCase()
								: "",
							textAlign: "center",
							fill: this.style.textColor,
							font: '12px "pingfang", sans-serif'
						},
						onclick: function() {
							// console.log(this.style);
							var name = this.style.name;
							this.resetOption(this.chart, this.option, name);
						}
					}
				]
			};

			this.pos.leftCur += this.pos.leftPlus;

			return breadcrumb;
		},
		// 设置effectscatter
		initSeriesData(data) {
			console.log(data,this.geoCoordMap);

			var temp = [];
			const icon = {//site
				car: "image://",
				site: "image://",
				sourceMove: "image://",
				person: "image://",
				enterprise: "image://",
			}
			for (var i = 0; i < data.length; i++) {
				var geoCoord = this.geoCoordMap[data[i].name];
				if (geoCoord) {
					temp.push({
						name: data[i].country,
						symbol:icon[data[i].iconType],
						symbolSize: 20,
						value: geoCoord.concat(data[i].value),
						company: data[i].name
					});
				}
			}

			return temp;
		},
		zoomAnimation() {
			var count = null;
			var zoom = function(per) {
				if (!count) count = per;
				count = count + per;
				// console.log(per,count);
				this.chart.setOption({
					geo: {
						zoom: count
					}
				});
				if (count < 1)
					window.requestAnimationFrame(function() {
						zoom(0.2);
					});
			};
			window.requestAnimationFrame(function() {
				zoom(0.2);
			});
		},
		/**
		 * 方法描述
		 */
		chartInitData() {
			this.chart = echarts.init(document.getElementById(this.id));
			// let curGeoJson = {};
			// let geoData = this.initSeriesData(this.opt.data);
			this.option = {
				tooltip: {
					show: true,
					trigger: "item",
					alwaysShowContent: false,
					backgroundColor: "rgba(50,50,50,0.7)",
					hideDelay: 100,
					triggerOn: "mousemove",
					enterable: true,
					// position: ["60%", "70%"],
					formatter: function(params) {
						//, ticket, callback
						return (
							// "所属地区：" +
							// params.data.name +
							// "<br/>" +
							"名称：" +
							params.data.company
						);
					}
				},
				// graphic: [
				// 	{
				// 		type: "group",
				// 		left: 198,
				// 		top: 46,
				// 		children: [
				// 			{
				// 				type: "line",
				// 				left: 0,
				// 				top: -20,
				// 				shape: {
				// 					x1: 0,
				// 					y1: 0,
				// 					x2: 60,
				// 					y2: 0
				// 				},
				// 				style: {
				// 					stroke: "rgba(147, 235, 248, .8)"
				// 				}
				// 			},
				// 			{
				// 				type: "line",
				// 				left: 0,
				// 				top: 20,
				// 				shape: {
				// 					x1: 0,
				// 					y1: 0,
				// 					x2: 60,
				// 					y2: 0
				// 				},
				// 				style: {
				// 					stroke: "rgba(147, 235, 248, .8)"
				// 				}
				// 			}
				// 		]
				// 	},
				// 	{
				// 		id: "jiangsu",
				// 		type: "group",
				// 		left: 198 + 2,
				// 		top: 50,
				// 		children: [
				// 			{
				// 				type: "polyline",
				// 				left: 90,
				// 				top: -12,
				// 				shape: {
				// 					points: this.line
				// 				},
				// 				style: {
				// 					stroke: "transparent",
				// 					key: name[0]
				// 				},
				// 				onclick: function() {
				// 					var name = this.style.key;
				// 					this.resetOption(
				// 						this.chart,
				// 						this.option,
				// 						name
				// 					);
				// 				}
				// 			},
				// 			{
				// 				type: "text",
				// 				left: 0,
				// 				top: "middle",
				// 				style: {
				// 					text: "江苏",
				// 					textAlign: "center",
				// 					fill: this.style.textColor,
				// 					font: this.style.font
				// 				},
				// 				onclick: function() {
				// 					this.resetOption(
				// 						this.chart,
				// 						this.option,
				// 						"江苏"
				// 					);
				// 				}
				// 			},
				// 			{
				// 				type: "text",
				// 				left: 0,
				// 				top: 10,
				// 				style: {
				// 					text: "jiangsu",
				// 					textAlign: "center",
				// 					fill: this.style.textColor,
				// 					font: '12px "Microsoft YaHei", sans-serif'
				// 				},
				// 				onclick: function() {
				// 					this.resetOption(
				// 						this.chart,
				// 						this.option,
				// 						"江苏"
				// 					);
				// 				}
				// 			}
				// 		]
				// 	}
				// ],
				geo: {
					map: this.opt.mapName,
					roam: true,
					zoom: 1,
					label: {
						normal: {
							show: true,
							textStyle: {
								color: "#fff"
							}
						},
						emphasis: {
							textStyle: {
								color: "#fff"
							}
						}
					},
					itemStyle: {
						normal: {
							borderColor: "#4A4D8A",
							borderWidth: 1,
							areaColor: {
								type: "radial",
								x: 0.5,
								y: 0.5,
								r: 0.8,
								colorStops: [
									{
										offset: 0,
										color: "#05102B" // 0% 处的颜色
									},
									{
										offset: 1,
										color: "#05102B" // 100% 处的颜色
									}
								],
								globalCoord: false // 缺省为 false
							},
							// shadowColor: "rgba(128, 217, 248, 1)",
							// shadowColor: 'rgba(255, 255, 255, 1)',
							// shadowOffsetX: -2,
							// shadowOffsetY: 2,
							// shadowBlur: 10
						},
						emphasis: {
							areaColor: "#389BB7",
							borderWidth: 0
						}
					},
					regions: this.opt.activeArea.map(function(item) {
						if (typeof item !== "string") {
							return {
								name: item.name,
								itemStyle: {
									normal: {
										areaColor: item.areaColor || "#389BB7"
									}
								},
								label: {
									normal: {
										show: item.showLabel,
										textStyle: {
											color: "#fff"
										}
									}
								}
							};
						} else {
							return {
								name: item,
								itemStyle: {
									normal: {
										borderColor: "#91e6ff",
										areaColor: "#389BB7"
									}
								}
							};
						}
					})
				},
				series: [
					{
						type: "scatter",
						coordinateSystem: "geo",
						showEffectOn: "render",
						rippleEffect: {
							period: 15,
							scale: 4,
							brushType: "fill"
						},
						hoverAnimation: true,
						itemStyle: {
							normal: {
								color: "#FFC848",
								shadowBlur: 10,
								shadowColor: "#333"
							}
						},
						// type: "custom", //配置显示方式为用户自定义
						// coordinateSystem: "geo",
						// itemStyle: {
						// 	normal: {
						// 		color: "#46bee9"
						// 	}
						// },
						// renderItem: function(params, api) {
						// 	//具体实现自定义图标的方法
						// 	return {
						// 		type: "image",
						// 		style: {
						// 			image: "../../../assets/info_images/car.png",
						// 			x: api.coord([
						// 				geoData[params.dataIndex].value[0],
						// 				geoData[params.dataIndex].value[1]
						// 			])[0],
						// 			y: api.coord([
						// 				geoData[params.dataIndex].value[0],
						// 				geoData[params.dataIndex].value[1]
						// 			])[1]
						// 		}
						// 	};
						// },
						data: this.initSeriesData(this.opt.data)
					}
				]
			};
			this.chart.setOption(this.option);

		},
		chartInit() {
			// const url = './mixins/data-jiangsu.json'

			console.log('------------------json----------------');
			// import("../mixins/data-jiangsu.json").then(jsons => {
			// 	console.log('------------------json----------------',jsons)
			// 	echarts.registerMap("jiangsu", jsons.default);
			// 	this.chartInitData();
			// 	this.chart.on('click', param => {
			// 		this.$emit('mapClick', param)
			// 	})
			// });
			// import("/config/mapjson/data-jiangsu.json").then(jsons => {
			// 	console.log('------------------json----------------',jsons)
			// 	echarts.registerMap("jiangsu", jsons.default);
			// 	this.chartInitData();
			// 	this.chart.on('click', param => {
			// 		this.$emit('mapClick', param)
			// 	})
			// });
			// getjson('/aaaa').then(res => {
			// })
			axios({
				url: `/config/mapjson/data-${this.mapName}.json`,
				method: 'get'
			}).then(res => {
				// debugger
				echarts.registerMap(this.mapName, res.data);
				this.chartInitData();
				this.chart.on('click', param => {
					this.$emit('mapClick', param)
				})
			})
		}
	}
};
</script>

<style lang="scss" scoped></style>
